<template>
  <div v-if="goodsList.length" class="liebiaochuchuang">
    <div class="boardGoods">
      <div v-if="module.modules[0].bg" style="margin-bottom: 15px">
        <img
          :src="fileBaseUrl + module.modules[0].bg"
          class="board-bg"
          style="height: 26px"
        >
      </div>
      <div v-else class="flex-x title-div">
        <div class="title-text">{{ module.modules[0].title }}</div>
        <div class="subtitle-text">{{ module.modules[0].subTitle }}</div>
      </div>
      <div>
        <!-- <scroll-div wx:if="{{boardType=='liebiaochuchuang'}}" style="max-height:750rpx" bindscrolltolower="getGoodsBySelfFunc"> -->
        <div class="flex-x" style="flex-wrap: wrap">
          <div
            v-for="(item, index) in goodsList"
            :key="index"
            class="boardGoods-item"
            :style="{ marginRight: (index + 1) % 3 == 0 ? '0px' : '12px' }"
          >
            <img
              :src="fileBaseUrl + item.coverImg"
              style="width: 111px; height: 134px"
              class="board-img-default"
            >
            <div class="board-title app-space-ell-1">{{ item.title }}</div>
            <div class="board-price">￥小程序查看</div>
          </div>
        </div>
        <div
          v-if="goodsList.length >= 6"
          catchtap="getGoodsBySelfFunc"
          class="more flex-x-center-center"
        >
          点击加载更多...
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig v-else :module="module" />
</template>

<script>
import { getShelfList } from '@/views/wxaMallModule/api/shelf'
import { getPlanShelfList } from '@/api/reservation'
export default {
  props: {
    module: {
      type: Object
    },
    fileBaseUrl: {
      type: String
    }
  },
  data() {
    return {
      shelfId: null,
      goodsList: [],
      noData: false
    }
  },
  watch: {
    module: {
      handler() {
        if (this.module.modules.length) {
          this.getShelfList()
        } else {
          this.goodsList = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    if (this.module.modules.length) {
      this.getShelfList()
    }
  },
  methods: {
    getShelfList() {
      if (this.module.modules[0].biz.type === 'RESERVATION_SHELF') {
        getPlanShelfList([this.module.modules[0].biz.params.shelfId]).then(
          (res) => {
            this.goodsList = res.data[0].planList.splice(0, 6)
          }
        )
      } else {
        getShelfList([this.module.modules[0].biz.params.shelfId]).then(
          (res) => {
            this.goodsList = res.data[0].goodsList.splice(0, 6)
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boardGoods {
  .board-img {
    border-radius: 10px 10px 10px 0px;
    width: 100px;
    height: 100px;
  }
  .board-img-default {
    border-radius: 10px;
    width: 111px;
    height: 133.5px;
  }

  .board-title {
    width: 100px;
    font-size: 13.5px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 7px;
    margin-top: 5px;
  }
  .board-price {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #e64340;
  }
  .title-div {
    align-items: flex-end;
    margin-bottom: 13px;
  }

  .title-text {
    font-size: 16.5px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .subtitle-text {
    font-size: 13.5px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;
    margin-left: 9px;
  }
  .boardGoods-item {
    margin-bottom: 17px;
  }
  .boardGoods-item-scroll {
    margin-right: 10.5px;
    margin-bottom: 19px;
  }
  .board-bg {
    display: block;
  }
}
.more {
  margin: 0 auto;
  color: #b2b2b2;
  font-size: 14.5px;
  font-family: PingFang SC;
  font-weight: 400;
}

/* .IconAD {
  display: flex;
  flex-wrap: wrap;
  padding-top: 54rpx;
  width: 100%;
  .crosswise-line {
    height: 14rpx;
    margin-top: 28rpx;
    width: 100%;
    padding: 0 19rpx;
    box-sizing: border-box;
  }
  .line {
    background-color: #f6f6f6;
    width: 100%;
    height: 14rpx;
  }

  .iconad-item {
    width: 25%;
    text-align: center;
    margin-bottom: 27rpx;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 40rpx;
      margin: 0 auto;
    }

    .title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      width: 100rpx;
      color: rgba(0, 0, 0, 1);
      margin: 0 auto;
      margin-top: 10rpx;
    }
  }
} */
</style>
